<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣App-首页</title>
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./img/icon/font_iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/app-public.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="mobile">
        <header>
            <div class="functional_domain flexBox">
                <span class="showMore iconfont">&#xe66d;</span>
                <div class="searchBar flexBox">
                    <span class="iconfont">&#xe8d6;</span>
                    <span class="placeholder">豆瓣电影日历拼贴艺术大赏</span>
                </div>
                <span class="showMessage iconfont">&#xe65e;</span>
            </div>
            <div class="module_switch flexBox">
                <a href="javascript:void(0);" class="statuses" data-index="1">动态</a>
                <a href="javascript:void(0);" class="recommends current" data-index="2">推荐</a>
                <span class="afterSlider"></span>
            </div>
        </header>

        <aside>
            <div class="main">
                <div class="hd flexBox">
                    <span class="iconfont close">&#xe600;</span>
                    <span class="iconfont">&#xe60e;</span>
                </div>
                <div class="mid">
                    <div class="user flexBox">
                        <div class="avatar"><img src="./img/avatar.jpg" alt=""></div>
                        <span class="username">未登录</span>
                    </div>
                    <div class="userFuncArea">
                        <div class="top">
                            <div class="item flexBox">
                                <span class="iconfont">&#xe70f;</span>
                                <span class="text">我的收藏/豆列</span>
                                <span class="rightText">我的豆列在这里</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe609;</span>
                                <span class="text">我的关注</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe638;</span>
                                <span class="text">我的浏览</span>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="item flexBox">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">青少年模式</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">设置</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe624;</span>
                                <span class="text">帮助与反馈</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xf706;</span>
                                <span class="text">社区管理中心</span>
                            </div>
                            <div class="item flexBox logOut">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">退出登录</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bd">
                    <div class="topFuncArea flexBox">
                        <div class="item flexBox">
                            <span class="iconfont order"></span>
                            <span class="text">订单</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont cart"></span>
                            <span class="text">购物车</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont wallet"></span>
                            <span class="text">钱包</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont db_time"></span>
                            <span class="text">豆瓣时间</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont db_bookshelf"></span>
                            <span class="text">豆瓣阅读书架</span>
                        </div>
                    </div>
                    <div class="license">
                        <img src="./img/副页-license.png" alt="">
                        <span>证照信息<span class="iconfont">&#xe6a3;</span></span>
                    </div>
                </div>
            </div>
            <div class="mask"></div>
        </aside>

        <main>
            <ul class="flexBox container">
                <li class="status">
                    <p class="title">还没有友邻的动态，<br>看看别人在说什么...</p>
                    <div class="topics">
                        <div class="item flexBox">
                            <div class="content flexBox">
                                <div class="hd">
                                    <span class="iconfont">&#xe61e;</span>
                                    <span class="text">你向往的恋爱时什么样子的?</span>
                                </div>
                                <div class="bd flexBox">
                                    <div class="avatar"><img src="./img/avatar.jpg" alt=""></div>
                                    <div class="text flexBox">
                                        <span>相互理解，相互信任</span>
                                        <span class="time">2小时前</span>
                                    </div>
                                </div>
                            </div>
                            <span class="iconfont btn_more">&#xe6a3;</span>
                        </div>
                        <div class="item flexBox">
                            <div class="content flexBox">
                                <div class="hd">
                                    <span class="iconfont">&#xe61e;</span>
                                    <span class="text">我与父母的沟通技巧</span>
                                </div>
                                <div class="bd flexBox">
                                    <div class="avatar"><img src="./img/avatar.jpg" alt=""></div>
                                    <div class="text flexBox">
                                        <span>没有沟...</span>
                                        <span class="time">昨天 01:17</span>
                                    </div>
                                </div>
                            </div>
                            <span class="iconfont btn_more">&#xe6a3;</span>
                        </div>
                        <div class="item flexBox">
                            <div class="content flexBox">
                                <div class="hd">
                                    <span class="iconfont">&#xe61e;</span>
                                    <span class="text">下雨天你最喜欢做什么事情?</span>
                                </div>
                                <div class="bd flexBox">
                                    <div class="avatar"><img src="./img/avatar.jpg" alt=""></div>
                                    <div class="text flexBox">
                                        <span>当然是我在床上吃薯片追剧喝点小酒啦</span>
                                        <span class="time">昨天 15:46</span>
                                    </div>
                                </div>
                            </div>
                            <span class="iconfont btn_more">&#xe6a3;</span>
                        </div>
                    </div>
                    <div class="more_topics">
                        22862个话题在被参与
                        <span class="iconfont btn_more">&#xe6a3;</span>
                    </div>
                </li>
                <li class="recommend">
                    <ul></ul>
                </li>
            </ul>

        </main>
        
        <footer>
            <div class="container flexBox">
                <a href="javascript:void(0);" class="item flexBox current" id="index" data-index="1">
                    <span class="iconfont" data-index="1"></span>
                    <span class="text" data-index="1">首页</span>
                </a>
                <a href="./app-movie.html" class="item flexBox" id="media" data-index="2">
                    <span class="iconfont" data-index="2"></span>
                    <span class="text" data-index="2">书影音</span>
                </a>
                <a href="./app-group.html" class="item flexBox" id="group" data-index="3">
                    <span class="iconfont" data-index="3"></span>
                    <span class="text" data-index="3">小组</span>
                </a>
                <a href="./app-market.html" class="item flexBox" id="market" data-index="4">
                    <span class="iconfont" data-index="4"></span>
                    <span class="text" data-index="4">市集</span>
                </a>
                <a href="./app-user.html" class="item flexBox" id="user" data-index="5">
                    <span class="iconfont" data-index="5"></span>
                    <span class="text" data-index="5">我</span>
                </a>
            </div>
            
            <div class="publish_icon"></div>
        </footer>
    </div>
</body>

<script src="./lib/jquery-3.6.1.min.js"></script>
<script src="./lib/EasyLazyload.min.js"></script>
<script src="./lib/jquery.bcakgroundColor.js"></script> <!-- 背景颜色渐变插件 -->
<script src="./js/app-public.js"></script>
<script>
    $(function(){
        // 初始化滑块 和 点击事件
        afterSlideFunc(2);
        // 点击时 切换模块
        var screen_width = $('main ul.container').css('left').replace('px','').replace('-','');     //屏幕宽度
        $('.module_switch').on('click',function(e){
            var index = e.target.dataset.index;
            if(index){
                if(index == 1) $(window).scrollTop(0);  //点击 动态时  回到顶部
                
                var container_left = - (index - 1) * screen_width + 'px';          // 模块切换 修改ul的left值
                $('main ul.container').css('left',container_left);
            }
        })

        // 主要内容
        var recommendList = [];
        // 发送请求
        $.ajax({
            type:'post',
            async:false,
            url:'/postIndexRecommendList',
            success:function(res){
                recommendList = res;
                console.log(res);
                res.forEach((item,index)=>{
                    // 数据渲染
                    renderData(item);
                })

                    // 如果 文本内容大于 最大高度  就添加  ...全文
                detailOverflow($('ul li .mid .content p.text span.long_text'));

                // 修改图片盒子样式
                modifyPicBoxCSS();
                
                // 无限滚动
                addMore(recommendList);

                // 懒加载
                lazyLoadAgain();
            },
            error:function(err){
                console.log('err',err);
            }
        });
    
        // 点赞
        thumbsUpFunc();
    })
    
    // 数据渲染
    function renderData(item){
        // 话题
        var topic = '';
        if(item.type == 'user'){
            if(item.topic != ''){
                topic = `<div class="topic">
                            <div class="mainBox">
                                <span class="iconfont">&#xe61e;</span>
                                <span class="text">${item.topic}</span>
                            </div>
                        </div>`;
            }
        }
        // 标题
        var title = '';
        if(item.title != ''){
            title = `<span class="title">${item.title}</span>`;
        }
        // 主要文字
        var detail = '';
        if(item.detail != ''){
            detail = `${item.detail}`;
        }
        // 图片
        var meta = '';
        if(item.picture.length > 0){
            meta = `<div class="meta">`;
            var row = Math.ceil(item.picture.length / 3);
            for(var i = 0; i<row; i++){
                var count = 3;
                if(i == row-1 && item.picture.length % 3 != 0) count = item.picture.length % 3;

                var rowBox = '<div class="row flexBox">';
                for(var j = 0; j<count; j++){
                    var index = i*3+(j+1) - 1;
                    rowBox += `<div class="item"><img data-lazy-src="${item.picture[index]}" alt=""></div>`;
                }
                rowBox += '</div>';
                meta += rowBox;
            }
            meta += `</div>`;
        }
        // 点赞数
        var likes = '点赞';
        if(item.likes != 0) likes = item.likes;
        // 评论数
        var comments = '评论';
        if(item.comments != 0) comments = item.comments;
        // 转发数
        var forwards = '转发';
        if(item.forwards != 0) forwards = item.forwards;
        

        var liBox = `<li class="${item.type}">
                        <div class="hd flexBox">
                            <div class="avatar"><img src="${item.avatar}" alt=""></div>
                            <div class="name">${item.name}</div>
                            <span class="more iconfont">&#xe719;</span>
                        </div>
                        ${topic}
                        <div class="mid">
                            <div class="content">
                                <p class="text">
                                    <span class="long_text">
                                        ${title}
                                        ${detail}
                                    </span>
                                </p>
                            </div>
                            ${meta}
                        </div>
                        <div class="bd flexBox">
                            <div class="thumbsUp">
                                <span class="iconfont">&#xe696;</span>
                                <span class="num">${likes}</span>
                            </div>
                            <div class="comments">
                                <span class="iconfont">&#xe662;</span>
                                <span class="num">${comments}</span>
                            </div>
                            <div class="forwardTo">
                                <span class="iconfont">&#xe66c;</span>
                                <span class="num">${forwards}</span>
                            </div>
                        </div>
                    </li>`;
        
        $('main ul.container li.recommend ul').append(liBox);
        // 懒加载
        lazyLoadAgain();
    }

    // 文本溢出处理
    function detailOverflow(obj){
        obj.each((index,item)=>{
            var itemText = item.innerText;
            moreLine(item,4,itemText,'green','全文');
        })
    }

    // 修改图片盒子样式
    function modifyPicBoxCSS(){
        var liItem = $('main ul.container li.recommend ul li');
        liItem.each((index,item)=>{
            var picItem = $(item).find('.meta .item');
            var item_len = picItem.length;   //图片个数
            if(item_len != 0){
                picItem.height($(item).find('.meta .item').width());   // 设置高度 == 宽度
                // console.log(picItem.width(),picItem.height());
                
                picItem.first().css('border-top-left-radius','10px');                          // 第一个
                $(item).find('.meta .row').first().find('.item').last().css('border-top-right-radius','10px');    //第一行的最后一个
                $(item).find('.meta .row').last().find('.item').first().css('border-bottom-left-radius','10px');  //最后一行的第一个
                picItem.last().css('border-bottom-right-radius','10px');                       // 最后一个


                var row = Math.ceil(item_len / 3);   // 行数
                if(item_len % 3 != 0){                                                           // 最后一行小于3个 前一行的最后一个
                    $('li .meta .row').eq(row-2).find('.item').last().css('border-bottom-right-radius','10px');
                }
            }
        })
        

    }


    // 无限列表
    function addMore(res){
        $(window).scroll(function(){
            var mainHei = $('main').height();
            var winHei = $(window).height();
            var winScr = $(window).scrollTop();

            var liBoxNum = $('li.recommend ul li').length;
            var liBox_maxNum = 20;
            
            // 一个一个追加，最大长度为20
            if($('li.recommend ul li').length < liBox_maxNum && winScr >= mainHei - winHei){
                // 随机抽取
                var random = Math.floor(Math.random() * (res.length-0)+0);

                // 追加新内容
                renderData(res[random]);

                // 文本溢出处理
                detailOverflow($('li.recommend ul li:last-child .mid .content p.text span.detail'));

                // 修改图片盒子样式
                modifyPicBoxCSS();
            }
        })
    }



</script>
</html>